<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:16:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:06:23
 * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
 <dv-border-box-13>
  <div class="content-title" v-if="title != ''">
    <div class="title-zuo"></div>
    <span class="title-span">&nbsp;&nbsp;{{ title }}&nbsp;&nbsp;</span>
    <div class="title-you"></div>
  </div>
  <div :class="title == '' ? 'content-main-def':'content-main'">
    <slot></slot>
  </div>
 </dv-border-box-13>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
   title:{
    type:String,
    default:''
   }
  },
  created() {},

  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
$titleHeight:38px;
$contentHeight:calc(100% - 38px);

.content-title{
  height: $titleHeight;
  display: flex;
  justify-content: center;
  align-items: end;

  div{
    width: 58px;
    height: 14px;
    background-size: cover;
  }

  .title-zuo{
    background-image: url('../../assets/img/titles/zuo.png');
  }
  .title-you{
    background-image: url('../../assets/img/titles/you.png');
  }

  .title-span{
    font-weight: 300;
    letter-spacing: 2px;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.content-main-def{
  width: 100%;
  height: 100%;
}
.content-main{
  width: 100%;
  height: $contentHeight;
}
</style>